<template>
    <el-dialog class="base-config-dialog" title="基础设置" width="85%"
               :visible.sync="visible" :before-close="handleClose">

        <div class="option">
            <el-select v-model="config.active" value="" placeholder="请选择配置">
                <el-option
                        v-for="item in config.list"
                        :key="item.index"
                        :label="item.name"
                        :value="item.index">
                </el-option>
            </el-select>
            <el-button type="text" @click="addConfigClick">添加配置</el-button>
        </div>


        <template v-if="config.list.length>0">
            <el-form class="form" :model="activeConfig" :rules="rules" ref="ruleForm" labelWidth="150px">
                <el-form-item label="配置名称" prop="name">
                    <el-input v-model="activeConfig.name"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="activeConfig.author"></el-input>
                </el-form-item>
                <el-form-item label="DBUrl" prop="dbUrl">
                    <el-input v-model="activeConfig.dbUrl"></el-input>
                </el-form-item>
                <el-form-item label="DBName" prop="dbName">
                    <el-input v-model="activeConfig.dbName"></el-input>
                </el-form-item>
                <el-form-item label="DBUser" prop="dbUser">
                    <el-input v-model="activeConfig.dbUser"></el-input>
                </el-form-item>
                <el-form-item label="DBPass" prop="dbPass">
                    <el-input v-model="activeConfig.dbPass"></el-input>
                </el-form-item>
                <el-form-item label="ProjectPath" prop="projectPath">
                    <el-input v-model="activeConfig.projectPath"></el-input>
                </el-form-item>
                <el-form-item label="package" prop="packageName">
                    <el-input v-model="activeConfig.packageName"></el-input>
                </el-form-item>
                <el-form-item label="MyBatisXMLPath" prop="myBatisXMLPath">
                    <el-input v-model="activeConfig.myBatisXMLPath" placeholder="输入MyBatis的xml文件位置，相对src目录开始，不包括src"></el-input>
                </el-form-item>
            </el-form>
        </template>

        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submitClick">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
    import electron from 'electron';
    import path from 'path';
    import fs from 'fs';

    /**
     * @author 白雨浓
     * @date 2018/1/13 20:31
     *
     * 基础设置窗口
     **/
    export default{
        name: 'AcBaseConfigDialog',
        props: ['dialogVisible'],
        data(){
            return {
                visible: this.dialogVisible,
                rules: {},
                path: {config: ''},
                config: {
                    version: 0,
                    active: null,
                    list: []
                },
            }
        },
        computed: {
            activeConfig(){
                return this.config.list[this.config.active]
            }
        },
        mounted(){
            this.$nextTick(() => {
                this.readConfig();
            })
        },
        methods: {
            submitClick(){
                this.writeConfig();
                this.$emit('onSubmit');
            },
            addConfigClick(){
                this.$prompt('请输入配置名称', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    if (value.trim().length === 0) return;

                    const index = this.config.list.length;
                    this.config.list.push({
                        index: index,
                        name: value,
                        author: '',
                        dbUrl: '',
                        dbName: '',
                        dbUser: '',
                        dbPass: '',
                        projectPath: '',
                        packageName: '',
                        myBatisXMLPath: ''
                    });
                    this.config.active = index;
                });
            },
            readConfig(){
                const dataPath = (electron.app || electron.remote.app).getPath('userData');
                const filePath = path.join(dataPath, 'config.cnf');

                if (!fs.existsSync(filePath)) return;

                const data = fs.readFileSync(filePath, 'utf-8');

                try {
                    this.config = JSON.parse(data + '');
                } catch (e) {
                    this.$$msg.error('配置文件损坏，请重新配置');
                }
            },
            writeConfig(){
                const dataPath = (electron.app || electron.remote.app).getPath('userData');
                const filePath = path.join(dataPath, 'config.cnf');

                this.config.version++;
                fs.writeFileSync(filePath, JSON.stringify(this.config));
                this.$storage.local.setItem('config', this.config);
                this.handleClose();
            },
            /** 关闭处理 */
            handleClose(){
                this.visible = false;
                setTimeout(() => this.$emit('update:dialogVisible', false), 300);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .base-config-dialog {
        .option {
            position absolute
            right 30px
            top 60px
        }

        .form {
            width 80%
            margin 35px auto
        }

    }
</style>